<template>
<div>
	  <div class="goBack" @click="$router.replace({name:'wallet',query:{returnHistory:true}})"></div>
  <div class="bannerTop" v-if="status === '2'">
    <img src="../../../images/no.gif" />
    <p class="title md_m_font color_gray_02">提现失败</p>
    <p class="md_m_font color_gray_03"><b>￥</b>{{money}}</p>
    <div class="know white_bg" @click="$router.push({path: '/wallet'})">知道了</div>
  </div>
  <div class="bannerTop" v-else-if="status === '0'">
    <img src="../../../images/ok.gif" />
    <p class="title md_m_font color_gray_02">提现成功</p>
    <p class="md_m_font color_gray_03"><b>￥</b>{{money}}</p>
    <div class="know white_bg" @click="$router.push({path: '/wallet'})">知道了</div>
  </div>
  <div class="bannerTop" v-else-if="status === '1'">
    <img src="../../../images/waiting.png" />
    <p class="title md_m_font color_gray_02">受理中...请耐心等待</p>
    <p class="md_m_font color_gray_03"><b>￥</b>{{money}}</p>
    <div class="know white_bg" @click="$router.push({path: '/wallet'})">知道了</div>
  </div>
  <div class="bottomMsg">
    <div class="bottomMsg_content">
      <div>到账银行卡</div>
      <div>{{cardInfo.cardName}}</div>
    </div>
    <div class="bottomMsg_content">
      <div>提现金额</div>
      <div><b>￥</b>{{money}}</div>
    </div>
    <div class="bottomMsg_content">
      <div>提现状态</div>
      <div v-if="status === '0'">提现成功</div>
      <div v-else-if="status === '2'">账务处理失败</div>
      <div v-else-if="status === '1'">受理中</div>
    </div>

  </div>
</div>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters(['status', 'money', 'cardInfo'])
  },
  created: function() {
   
    
  },
  beforeRouteLeave(to, from, next){

    next();
  },

}
</script>

<style scoped="scoped" scoped>
.know {
  padding: .4rem 1rem;
  border: 1px solid #eb4e89;
  color: #eb4e89;
  width: 40%;
  margin-left: 30%;
  margin-top: 1rem;
  border-radius: 3px;
}

.bannerTop img {
  width: 16rem;
  margin: 0 auto;
}

.bannerTop {
  width: 100%;
  text-align: center;
}

.bannerTop .title {
  font-weight: bold;
}

.bottomMsg {
  width: 100vw;
  height: 7rem;
  position: absolute;
  bottom: 0rem;
  background: white;
  padding: 1rem;
}

.bottomMsg_content {
  height: 2rem;
  line-height: 2rem;
}

.bottomMsg_content div:nth-of-type(1) {
  float: left;
}

.bottomMsg_content div:nth-of-type(2) {
  float: right;
}
.goBack {
  z-index: 30;
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
}
</style>
